"Hola Gem@: mi comentario en realidad es un pedido. Ya te conté que nuestro blog es escolar, tengo ganas de armar trabajos y que luego clickeando los chicos puedan ver las soluciones.
He pensado que quizás una forma de solucionar ese problema es ocultando la información, y mostrarla para la autocorrección "


Hay algunas formas de hacer que un texto o imagen despliegue un texto oculto tal y como algunos tenemos añadido el "leer más" para entradas cuyo texto es muy extenso.
Hace tiempo hablamos de una forma de hacerlo sin embargo por si esa forma no, nos convence vamos a hacerlo de otra que aprendí de J.Miur de Vagabundia.
Se trata de diferentes bloques animados que podemos adecuar a nuestra necesidad respecto a tamaño y color añadiendo si lo deseamos una imagen.

Para implementarlo, debemos descargar el archivo animatedcollapse.js y alojarlo en un servidor propio. Luego, insertamos el siguiente código en la plantilla de Blogger, justo antes de la etiqueta </HEAD>


<script type="text/javascript" src="URL_animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

(Recordemos que en esa parte de código para añadir en la plantilla deberemos sustituir donde dice URL_animatedcollapse.js por la url del archivo alojado en nuestro servidor)

El código para implementar un bloque animado ya sea en las entradas o en la sidebar es el siguiente:

<a href="javascript:nombreVAR.slideit()" style=" [estilo del botón] "></a>
<div id="nombreID" style="width:100%;">
<div style=" [estilo del contenido] "> [contenido] </div>
</div>
<script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)
</script>


Los nombres nombreVAR y nombreID deben ser únicos, si se colocan varios bloques expandibles, cada uno debe ser diferente.

El contenido de STYLE del DIV nombreID puede ser cualquier otro. Utilizando width:100% abarca el total de la sidebar pero podría utilizarse en cualquier otro lugar de una página web, por ejemplo:
style="width: 300px; height: 110px; background-"

tiempo indica la duración del efecto y es un valor expresado en milisegundos (1000 = 1segundo)

estadoinicial puede ser true o false e indica el estado inicial del bloque. Si es true, estará expandido y si es false, estará contraído.

Hay dos limitaciones a tener en cuenta. Si no establecemos la propiedad height, deberemos esperar a que se cargue la página, si hacemos click antes, aparecerá una ventana de advertencia.

Todo esta explicación y mucho más lo encontraréis en Vagabundia
al que agradezco una vez más su buen hacer y amabilidad, espero no se moleste por tomarle "prestada" gran parte de esta entrada.

Me he tomado la libertad de crear dos bloques para Marisa y este es el resultado:

autocorrección



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam lectus justo, porttitor ac, ullamcorper ac, cursus in, ante. Duis mi ante, sodales in, auctor vel, vehicula eget, sapien. Proin iaculis dui vitae leo. Integer blandit tempus leo. Morbi turpis. Suspendisse turpis. Nulla eget leo. Cras interdum sollicitudin ante. Sed placerat scelerisque magna. Vestibulum rutrum nibh a eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque nonummy, lorem non elementum consequat, velit diam iaculis erat, eget venenatis neque dui sed ligula.







El código sería:

<div style="width: 490px;">
<a href="javascript:collapseE31.slideit()" style="border-top: 1px solid rgb(153, 204, 255); border-bottom: 1px solid rgb(0, 0, 0); margin: 2px 0px; padding: 10px 0pt; width: 120px; height: 15px; display: block; background-color: rgb(240, 161, 24); color: rgb( 61, 56, 22) ! important; text-align: center; text-decoration: none ! important; font-size: 10px;">autocorrección
</a>
<div id="E31" style="width: 100%;">
<div style="border: 1px solid rgb( 61, 56, 22); padding: 5px; height: 200px; color: rgb( 61, 56, 22);">
Otra forma de bloque animado...
</div>
</div>
<script type="text/javascript">var collapseE31=new animatedcollapse("E31", 700, false)</script>< </div>


Y ya puestos también he probado con una imagen y con un efecto diferente, el resultado es el siguiente:




Correción




Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam lectus justo, porttitor ac, ullamcorper ac, cursus in, ante. Duis mi ante, sodales in, auctor vel, vehicula eget, sapien. Proin iaculis dui vitae leo. Integer blandit tempus leo. Morbi turpis. Suspendisse turpis. Nulla eget leo. Cras interdum sollicitudin ante. Sed placerat scelerisque magna. Vestibulum rutrum nibh a eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque nonummy, lorem non elementum consequat, velit diam iaculis erat, eget venenatis neque dui sed ligula.








El código para añadir en las entradas sería este:

<div style="width: 490px;">
<a style="margin: 2px 0px; background: transparent url(url-de-la-imagen) no-repeat scroll 0% 50%; width: 130px; height: 130px; display: block; color: rgb( 0, 0, 0) ! important; text-align: center; text-decoration: none ! important; font-size: 24px;" href="javascript:collapseE21.slideit()">

<b>texto-sobre-la-imagen</b>
</a>
<div id="E21" style="width: 100%; background-color: rgb(255, 255, 255);">
<div style="padding: 5px; color: rgb(0, 0, 0);">

aquí el texto,aquí el texto,aquí el texto,
aquí el texto,aquí el texto,aquí el texto,
aquí el texto,aquí el texto,aquí el texto,

</div>
</div>
<script type="text/javascript">var collapseE21=new animatedcollapse("E21", 100, false)</script>

</div>


Los cambios a realizar van en consonancia de la imagen y el tamaño de nuestro bloque animado...
El texto en negrita color rojo dentro del código es el lugar donde añadiremos la url de la imagen.
Para ajustar el tamaño de la imagen iremos al texto en color azul.
En color verde para variar tamaño del bloque.
Color naranja tamaño del texto sobre la imagen
Color lila o morado texto sobre la imagen
Donde dice "aquí el texto" es el espacio para escribir el texto oculto.
Y recuerda... cada vez que añadas un bloque diferente debes añadir un nombreVAR y nombreID diferentes (en el código aparece como E21)
Suerte Marisa



Anónimo

Hola Gema,

Soy Franco ... me conoseran de Recursos Blog, pero esta vez no vengo en representacion de RB sino por otro proyecto personal que quiero que conversemos ... se llamara Revista Web y quiero contactar con tigo ... te estuve enviando e-mail y no tuve respuestas asi que decidi dejar un comentario ... gracias ... chauuu

Responder
Gem@

Hola Franco he tenido problemas con los e-mail, cada día debo rescatar un buen número que aún no sé por qué van a la carpeta de spam.
Me pondré en contacto contigo.
Gracias.

Responder
Anónimo

GRACIAS ÍDOLA!!!
Te has tomado un trabajito de aquellos para explicar(me)el recurso. Te superagradezco tu generosidad, tu tiempo y tu esfuerzo.
Un beso.
Vamos a implementarlo. Espero que me salga!!!!!!

Responder
Beauty Inferno

awwwwwwww no puedo >.<
por mas que le hago el empeño no me resulto
me podrias ayudar?
lo de la plantilla ya lo hice, aloje el archivo .js en un hosting propio,
el problema es cuando voy a la plantilla
hago los cambios y no pasa nasa, o no me sale el texto.

Help!!!

el blog donde estoy implementando esto es en
http://epicachile.blogspot.com

ojala puedas ayudarme.


gracias


saludos

Responder
Anónimo

¿Y si no se tiene servidor propio? ¡casi nadie tiene!

Responder
Anónimo

Esto tranquilamente se puede usar para el seguir leyendo o no??? Me gusta la forma en la que aparece el contenido...
Sobre los archivos y el servidor propio, no se usa Google Pages para eso??

Responder
Gem@

Marisa ya me dirás que tal vas ;)

Beauty Inferno el primier script debes alojarlo en la plantilla (con la dirección de tu archivo)
El segundo es para añadirlo en las entradas o la sidebar, es entonces cuando te saldrá (no lo veo en tu blog) :)

Jaime Solis como bien dice Cristian está Google Pages mira aquí:
servicio-de-alojamiento
Si tienes problemas para alojar el archivo mándame un mail que te mande la url del mío ;)

Cristiam así es, Google Pages es un buen servicio y gratuito.
Podemos darle la utilidad que deseamos, todo es cuestión de imaginación.

Responder
Anónimo

¡Gracias!

Responder
Gem@

Gracias a ti Jaime ;)

Responder
Liz Hopps

Gemma estoy tratando de poner en un bloque animado, como el que tu tienes en menciones,todos los contadores que tengo al final del blog.Quiero que se desplieguen solo cuando pinche el nexo...ahora me sirve esta forma? y cual servidor me aconsejas para alojar animatedcolapsed?...gracias por tu ayuda..besos

Responder
Gem@

Este es completamente válido y este otro para añadir un menú también.
La diferencia de este último es que no necesitas alojar archivo alguno en un servidor.
Yo lo que hice en "Menciones" fue aplicar el código del menú, pero reducido como para añadir un solo botón y sustituyendo este por un texto. Si quieres te paso el código en un e-mail o te hago una entrada explicándolo.
Sobre el servidor utilizo GooglePage

Responder
Liz Hopps

Gemma eres un sol...lo probare
besotes

Responder
Unknown

Hola Gema, soy Malina (ciber-amiga de Yolanda de Cabalas), estoy probando cosas de tu pagina ya que empiezo a querer modificar cosas que en mi blog por cuenta propia y por supuesto la ayuda de todos los que ya llevais la delantera en la experiencia y ganas de ayudar, y...
tengo varias cosillas para consultarte.
1. En esta entrada para expandir pueden mostrarse vinculos en vez de solo texto? (me vendria bien para enlaces de descarga muy extensos)
2. Hay forma alguna de cambiar la forma en que indexa las paginas blogger?, osea... en vez de entradas antiguas, que se pudieran numerar como ocurre en las de wordpress que veo por ahi.
Bueno... de momento no te planteo mas, jejeje y tranquila, cuando puedas pues me dices. Besitos
http://malinamaniac.blogspot.com

Responder
Gem@

Hola Malina encantada de conocerte y bienvenida ;)
-Se puede mostrar todo lo que desees, imágenes, vínculos, vídeos, archivos de cualquier clase. es muy parecido al sistema que conocemos para expandir entradas solo que tu escoges en qué entrada lo añades y la parte de la entrada donde deseas que aparezca.
-El sistema de wordpress no hay forma de aplicarlo a Blogger al menos yo no he visto nada todavía aunque a decir verdad y en opinión de quien lo usa es muy similar al de Blogger la única diferencia es que nosotros pasamos página de una en una :(

Responder
Gem@

¿Cómo van las cosas Elizabetha?

Responder
LUPS

Y total... Que hice lo que me dijiste mi admirada Gem@ y nada que pude... snif :((. No sé en dónde estuvo mi falla. Te cuento, lo que deseo es que en la parte donde dice MI RANKING, aparezca oculto. Ya subí el archivo que me has enviado a mi servidor, lo coloqué arriba del HEAD, y a la hora de querer hechar a andar la cosa, nada más no me dejó. Creo que soy bastante cabezotas... ¡HELP ME PLEASE!!
Gracias de nuevo por sacarme de dudas...Ando que no doy una!!
LUPS

Responder
Gem@

No he podido verlo LUP buscaba eso de MI RANKINg pero no lo veo ¿de qué blog hablamos?
El script se añade antes de </HEAD> de todas formas cuando me digas donde lo tienes añadido veré donde está el error :)

Responder
Las cositas de Meri

Donde consigo el script? Ya no esta disponible ne esa dirección

Gracias

Responder
Anónimo

hola gema, te cuento queme encanta tu blog porque tus explicaciones me parecen muy claras pero no he podido poner el bloque animado, mi blog es leactifproject.blogspot.com ... lo que ocurre es q no se despliega

gracias

Responder
Gem@

:: Creo que es por la url del archivo, donde dice URL_animatedcollapse.js hay que copiar la url del archivo animatedcollapse.js que previamente habremos alojado en nuestro servidor.

Responder
Anónimo

ya lo hice, uso mediafire y copie la forum embed code, porque al copiar el htlm embed code me sale error en la plantilla

gracias por tu ayuda
y tu rapida respuesta

Responder
Gem@

:: Debe ser la url directa al archivo Le Actif Project.

Responder
Anónimo

q pena gema esq soy un poco nueva en esto entonces no entendi

Responder
Gem@

:: Le Actif Project me refiero a la url solamente sin embed code algo como http://....

Responder
Admin

Hola gem@, estoy viendo de hacer esto, es cierto ya lo había hecho antes, hace muuuucho, pero no me acuerdo como era y menos ahora que ya no podemos alojar los archivos, quiero poner el js dentro de la plantilla, pero no me acuerdo como era que se hacía :S Me podría decir como sería el código para meterlo en la plantilla y en que parte va?
Ya tengo el archivo en la pc, lo abrí en bloc de notas, pero no se donde ponerlo...

Besotes ;)

Responder
Gem@

:: En la plantilla debe ponerse de esto modo K_nelita:
<script type='text/javascript'>
//<![CDATA[
y aquí pegamos lo que copiamos del bloc de notas
..................
..................
..................
al final añadimos lo siguiente:
//]]>
</script>

;)

Responder
Admin

Gracias Gem@, eso ahora lo entendí, pero, debo estar mas tonta hoy que de costumbre, todavía no entiendo como tendría que poner la parte que va en la sidebar, que no quiero ponerle imagen, solo el título que haga de enlace y despliegue como en tu caso... que diga por ejemplo Directorios y al pinchar desplieguen los botones, como pongo eso? No estoy en un día muy lúcida :S

Responder
Gem@

:: La imagen se puede omitir y añadir un título simplemente, en el segundo ejemplo donde dice "texto-sobre-la-imagen" añadimos el título.
Luego si quieres dar estilos distintos a ese título lo puedes hacer en la parte que dice "a style=" son los estilos del texto que hace de enlace ancho en width, alto en height, color de texto, aliniamos con text-align, tamaño de fuente con font-size y podemos también añadir font-family para el tipo de fuente. Todo, separado por punto y coma :D

Responder
Admin

Hola Gem@ no se si estarás despierta todavía, he puesto otro "bloque" mas, con otra ID, y ahora quiero poner otro, pero no se como poner dentro el archivo del blog ya que es un gadget de Blogger... Como hiciste vos?

Y otra cosa, me quedan con mucha separación uno de otro, como no son imagenes, son los títulos así como los tenés vos, al ponerlos en diferentes elementos de pagina (no se si será eso) debería poner los dos dentro del mismo elemento?
Que te parece? Estoy hablando de Te Propongo...

Besotes ;)

Responder
Gem@

:: Me temo que no estaba despierta k_nelita el cambio de horario hace que a veces no coincidamos :S
Con el problema del archivo del blog me topé yo también, no recuerdo si fue por ese motivo que me incliné por la opción deslizante de Scriptaculous.
Quien si debe saberlo es J.Miur que hizo el tutorial de los bloques animados.
La distancia la puedes solucionar incluyendo el título en el mismo gadget que añades el contenido. Algo así como en el código que te pasé por mail la otra vez, con los estilos incluidos también para la fuente :)

Responder
Admin

Hola Gem@, voy a tener que buscar esa entrada de JMiur entonces por el problema del archivo...
Y lo otro lo "solucioné" poniendo un desplegable por un lado y otro por otro ;) mis chapucerías ja ja pero bueno tampoco tenían que estar juntos no? Vos no los tenés juntos y Rosa tampoco...

Hoy tuve mas problemas al tratar de ponerlo en dos blogs de mi hijo, ahí me volví loca porque la fuente y/o estilos son diferentes a los que me pasaste para mi blog y no supe corregirlos, así que quedaron bastante feos :S sobre todo teniendo en cuenta que en uno de los blogs los títulos de la sidebar llevan imagen que tampoco supe poner :$ Un desastre lo mío... pero ahí quedó, me cansé, revisé toda la plantilla buscando los estilos de la fuente y no encontré nada, y cuando creí encontrarlo no lo tomaba...

Vos seguís con la pc rota? Estás con la portátil?
Te pregunto por lo del otro blog, el de la imagen de fondo, ya se la puse pero no puedo saber como se ve en resoluciones mayores...
Había una web que daba ese servicio, ver el blog en diferentes resoluciones, pero no pude encontrarla... La Bloguería la tenía, pero ya no...

Besotes gemit@ ;)
Hoy me acostaré temprano porque madrugué mucho para ver el partido de Argentina, no se si te habrás enterado que ganamos, estamos muy contentos :D :D

Responder
Gem@

:: No hacía falta buscar K_nelita porque en esta misma entrada tienes el enlace a la explicación de JMiur.
El PC de sobremesa sigue roto, llevo tiempo con el portátil y tratándolo con cariño no se vaya a portal mal :)
Así es como yo lo veo:
http://img3.xooimage.com/views/8/0/5/screenshot.29-1d6d3b9.png/

Responder
Admin

Gracias Gem@, si, es aquí donde encontré la entrada de JMiur pero todavía no consigo los resultados deseados...

Esa captura la tomaste con el portátil? Tiene buena resolución! :)

Y que opinás de ese blog, al diseño me refiero, queda bien así con el fondo gris y la imagen de fondo? No ves nada blanco no? Es un engendro que inventé yo, de la unión de dos plantillas :o

Besotes ;)

Responder
Gem@

:: La captura es con el portátil k_nelita :D
el diseño es bonito, muy fino y no veo espacios de color blanco :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top